<template>
  <div style="width: 100%;height: 100%;position:absolute">
    <div class="topBg" />
    <div style="width:100%;height:40%;background-color:#6BA7FE" />
    <div id="pictureVerCode">
      <div style="display:flex;max-width:1150px;align-items: center">
        <div class="imgContent">
          <img
            class="imgYq"
            src="../assets/image/loginLeft.png"
            alt=""
          >
        </div>
        <div class="loginAccount">
          <div style="background-color: #FFFFFF;padding: 40px 40px;border-radius: 8px;">
            <div class="loginText">
              用户登录
            </div>
            <div class="userName">
              <img
                src="../assets/image/account.png"
                alt=""
              >
              <input
                ref="username"
                type="text"
                :placeholder="langObj.username"
              >
            </div>
            <div class="password">
              <img
                src="../assets/image/password.png"
                alt=""
              >
              <input
                ref="password"
                type="password"
                autocomplete="new-password"
                :placeholder="langObj.password"
              >
            </div>
            <JcRange 
              :success-fun="getCaptcha"
            />
            <div
              v-if="captcha"
              class="loginBtn"
              @click="login"
            >
              {{ langObj.login }}
            </div>
            <div
              v-else
              class="loginBtn noLoginBtn"
              @click="loginAgain"
            >
              {{ langObj.login }}
            </div>
          </div>
          
          <img
            src="../assets/image/bj3.png"
            style="width:130%;position:absolute;bottom:-32px;left:-25px;z-index:-1"
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script src="http://gias.jd.com/js/td.js"></script>
<script>
  import JcRange from './customizedContent/JcRange';

  export default {
    name: 'PictureVerCode',
    data() {
      return {
        jd_device_id: '', // 京东设备号
        tb_device_id: '', // 淘宝设备号
        status: false, // 滑动块状态
        captcha: '',
        disX: 0,
        rangeStatus: false,
        showChangeLang: false,
        langIndex: 0,
        langList: ['简体中文', 'English'],
        langObj: {
          username: '请输入用户名',
          password: '请输入密码',
          login: '登  录',
        }
      };
    },
    components: { JcRange }, // 滑动块组件
    beforeCreate() {
    },
    created() {
      document.onkeydown = e => {
        const key = e.keyCode;
        if (key === 13) {
          this.login();
        }
      };

      this.langIndex = Number(localStorage.getItem('langIndex')) || 0;
      this.setLangWord();
    },
    mounted() {
      this.tb_device_id = this.getCookie('_ati');// 获取淘宝设备号
      console.log('淘宝设备号', this.tb_device_id);
      getJdEid((eid, fp, udfp) => {
        this.jd_device_id = eid;// 京东只需要这个设备唯一标识
        console.log('京东设备号', this.jd_device_id); 
      });
    },
    methods: {
      getCookie(name) {
        let strcookie = document.cookie;// 获取cookie字符串
        let arrcookie = strcookie.split('; ');// 分割
        // 遍历匹配
        for (let i = 0; i < arrcookie.length; i++) {
          let arr = arrcookie[i].split('=');
          if (arr[0] == name) {
            return arr[1];
          }
        }
        return '';
      },
      // 滑块移动成功
      getCaptcha() {
        const enableGateWay = window.ProjectConfig.enableGateWay;
        const globalServiceId = window.sessionStorage.getItem('serviceId');
        this.$network
          .post(
            enableGateWay
              ? `/${globalServiceId}/p/c/getCaptcha`
              : '/p/c/getCaptcha'
          )
          .then(res => {
            console.log(res.data);
            this.captcha = res.data.captcha;
          });
      },
      setLangWord() {
        if (this.langIndex) {
          this.langObj = {
            username: 'userName',
            password: 'password',
            login: 'login',
          };
        } else {
          this.langObj = {
            username: '请输入用户名',
            password: '请输入密码',
            login: '登录',
          };
        }
      },
      changeLang(index) {
        this.langIndex = index;
        this.showChangeLang = false;
        localStorage.setItem('langIndex', index);
        this.setLangWord();
      },
      loginAgain() {
        this.login();
      },
      login() {
        let message = {};
        this.spinShow = true;
        const enableGateWay = window.ProjectConfig.enableGateWay;
        const Version = window.ProjectConfig.Version;

        if (this.$refs.username.value === '') {
          message = {
            title: '错误',
            content: '请输入用户名',
            onOk: () => {
              this.spinShow = false;
            }
          };
          this.$Modal.fcError(message);
        } else if (this.$refs.password.value === '') {
          message = {
            title: '错误',
            content: '请输入密码',
            onOk: () => {
              this.spinShow = false;
            }
          };
          this.$Modal.fcError(message);
        } else if (
          this.$refs.username.value !== ''
          && this.$refs.password.value !== ''
        ) {
          // const globalServiceId = window.sessionStorage.getItem('serviceId');
          if (this.captcha != '') {
            debugger;
            this.$network
              .post(
                // enableGateWay ? `/${globalServiceId}/p/c/login` : '/p/c/login',
                enableGateWay ? `/${globalServiceId}/p/c/loginLark` : '/p/c/loginLark',
                this.$urlSearchParams({
                  username: this.$refs.username.value,
                  password: this.$refs.password.value,
                  captcha: this.captcha,
                  tb_device_id: this.tb_device_id,
                  jd_device_id: this.jd_device_id,
                  rememberMe: false,
                  lang: 'zh_CN'
                })
              )
              .then(r => {
                console.log('登录', r);
                if (Version === '1.4') {
                  if (r.status === 200) {
                    window.location.href = window.location.origin;
                  }
                // if (r.status === 200 && r.data.code === 0) {
                //   if (!r.data.data.riskUrl) {
                //     window.location.href = window.location.origin;
                //   } else {
                //     window.location.href = r.data.data.riskUrl; // 跳转到风控
                //   }
                // }
                } else if (r.status === 200) {
                  window.location.href = window.location.origin;
                }
                this.spinShow = false;
              });
          } else {
            this.$Message.error('请按住滑块，拖动到最右侧');
          }
        }
      }
    },
    watch: {},
    computed: {},
    beforeDestroy() {
    },
    destroyed() {
    }
  };
</script>
<style>
    /* 滑动控件容器,灰色背景 */
    #dragContainer {
        position: relative;
        display: inline-block;
        background: #e8e8e8;
        width: 300px;
        height: 33px;
        border: 2px solid #e8e8e8;
    }
    /* 滑块左边部分,绿色背景 */
    #dragBg {
        position: absolute;
        background-color: #7ac23c;
        width: 0px;
        height: 100%;
    }
    /* 滑动验证容器文本 */
    #dragText {
        position: absolute;
        width: 100%;
        height: 100%;
        /* 文字水平居中 */
        text-align: center;
        /* 文字垂直居中,这里不能用百分比,因为百分比是相对原始line-height的,而非div高度 */
        line-height: 33px;
        /* 文本不允许选中 */
        user-select: none;
        -webkit-user-select: none;
    }
    /* 滑块 */
    #dragHandler {
        position: absolute;
        width: 40px;
        height: 100%;
        cursor: move;
    }
    /* 滑块初始背景 */
    .dragHandlerBg {
        background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==");
    }
    /* 验证成功时的滑块背景 有√*/
    .dragHandlerOkBg {
        background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==");
    }
</style>
<style lang="less" type="text/less">
.topBg{
  width:100%;
  height:60%;
  background: url('../assets/image/buildBg.png') no-repeat center bottom;
  background-color:#EFF6FE;
  background-size: 80%;
}
#pictureVerCode {
    max-width: 1150px;
    max-height: 644px;
    width: 80%;
    // height: 60%;
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
    margin: auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;

        .imgContent {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          width: 450px;
          height: 460px;
          position: relative;
          .imgYq {
            width: 460px;
            position: absolute;
            bottom: 0;
          }
        }
        .loginAccount {
            margin-right:30px;
            margin-left:130px;
            border-radius: 8px;
            min-width: 370px;
            min-height: 380px;
            font-size: 14px;
            position: relative;
            z-index: 3;
          .loginText{
            height:40px;
            font-size: 24px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #323232;
            line-height: 40px;
            // text-shadow: 2px 2px 8px #3872C5;
            margin-bottom: 30px;
          }
            .password, .userName {
                display: flex;
                align-items: center;
                height: 35px;
                padding: 0 30px;
                margin-bottom: 30px;

                background: #F5F5F5;
                // box-shadow: 2px 2px 8px 0px #3872C5;
                border-radius: 5px;
                border: 1px solid #DDDDDD;


                > img {
                    width: 17px;
                    height: 17px;
                    margin-right: 16px;
                }

                input {
                    border: none;
                    background: transparent;
                    color: #333333;
                    height: 100%;
                }
            }

            .loginBtn {
                background: var(--primary-color);
                // box-shadow: 2px 2px 8px 0px #3872C5;
                border-radius: 37px;
                height: 50px;
                line-height:50px;
                text-align: center;
                font-size: 16px;
                color: #FFFFFF;
                margin-top:60px ;
                cursor: pointer;
            }
            .noLoginBtn{
              background: #eeeeee;
              color: #BBBBBB;
            }
        }
     
}
</style>
<style>
    input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px #F5F5F5 inset !important;
        -webkit-text-fill-color: #333333;
    }
    input::-webkit-input-placeholder {
        color: #333333;
    }
</style>
